<!--
 * @Author: lxy 2110251760@qq.com
 * @Date: 2022-10-12 10:45:06
 * @LastEditors: lxy 2110251760@qq.com
 * @LastEditTime: 2022-10-18 14:28:15
 * @FilePath: \jep-training-trinity-group\briup-ui\src\pages\admin\custome\Details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 顾客详情页 -->
  <div>
    <!-- 第一行 头像行 -->
    <img
      class="userFace"
      :src="userFace"
      alt="暂无头像"
      style="margin-left: 130px"
    >
    <a
      href="#"
      style="float: right; margin: 100px 100px 0 0; color: green"
      @click.prevent="toEditImg()"
    >修改头像</a>
    <!-- 第一行 头像行结束 -->
    <!-- 第二行 修改头像模态框 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
      <el-form :model="form">
        <!-- 头像 -->
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="userFace" :src="form.userFace" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toClose()">取消</el-button>
        <el-button type="primary" @click="toSubmit">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- 第二行 修改头像模态框结束 -->
    <!-- 第三行 顾客详情信息form表单 -->
    <el-form :model="formDetail">
      <el-form-item label="登录用户：" :label-width="formLabelWidth">
        {{ formDetail.username }}
      </el-form-item>

      <el-form-item label="用户姓名:" :label-width="formLabelWidth">
        {{ formDetail.realname }}
      </el-form-item>

      <el-form-item
        label="用户手机:"
        :label-width="formLabelWidth"
        prop="price"
      >
        {{ formDetail.telephone }}
      </el-form-item>

      <el-form-item
        label="用户性别:"
        :label-width="formLabelWidth"
        prop="photo"
      >
        <el-tag v-if="formDetail.gender == 'female'">女</el-tag>
        <el-tag v-else-if="formDetail.gender == 'male'"> 男</el-tag>
        <el-tag v-else type="warning">暂无</el-tag>
      </el-form-item>

      <el-form-item label="用户角色:" :label-width="formLabelWidth">
        {{ formDetail.roles[0].name }}
      </el-form-item>

      <el-form-item label="用户生日:" :label-width="formLabelWidth">
        <el-tag v-if="formDetail.birth == null" type="warning">暂无</el-tag>
        <el-tag v-else type="success"> {{ formDetail.birth | fmtDate }}</el-tag>
      </el-form-item>

      <el-form-item label="注册时间:" :label-width="formLabelWidth">
        {{ formDetail.registerTime | fmtDate }}
      </el-form-item>

      <el-form-item label="邮箱:" :label-width="formLabelWidth">
        <el-tag
          v-if="formDetail.email == null || formDetail.email == ''"
          type="warning"
        >暂无</el-tag>
        <el-tag v-else type="success"> {{ formDetail.email }}</el-tag>
      </el-form-item>

      <el-form-item label="用户状态:" :label-width="formLabelWidth">
        {{ formDetail.status }}
      </el-form-item>
      <a
        href="#"
        style="float: right; margin: 100px 100px 0 0; color: green"
        @click.prevent="toEditDetail()"
      >修改个人信息</a>
    </el-form>

    <!-- 第三行 顾客详情信息form表单 结束-->
    <!--第四行 详情信息修改模态框 -->
    <el-dialog :title="title1" :visible.sync="visible1" @close="toClose">
      <el-form ref="myForm" :model="formDetail1" :rules="rules">
        <el-form-item label="登录用户" :label-width="formLabelWidth">
          <el-input
            v-model="formDetail1.username"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input
            v-model="formDetail1.realname"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-radio v-model="formDetail1.gender" label="male">男</el-radio>
          <el-radio v-model="formDetail1.gender" label="female">女</el-radio>
        </el-form-item>

        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model="formDetail1.telephone"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="formDetail1.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="formDetail1.birth"
            type="date"
            placeholder="选择出生日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toClose()">取消</el-button>
        <el-button type="primary" @click="toSubmitDetail">确定</el-button>
      </div>
    </el-dialog>
    <!--第四行 详情信息修改模态框  结束-->
  </div>
</template>

<script>
import {
  findUserDetailsById,
  alterUserface,
  saveOrUpdate
} from '../../../api/user'
import { uploadFileURL } from '../../../utils/config'
export default {
  data() {
    return {
      // 详情信息模态框
      title1: '修改用户详情信息',
      visible1: false,
      // 详情信息数据来源
      formDetail: '',
      // 详情信息模态框数据来源
      formDetail1: '',
      // 修改头像模态框
      visible: false,
      title: '',
      uploadFileURL,
      // 头像上传图片变量
      userFace: '',
      // 表单对象
      form: {},
      formLabelWidth: '220px',

      // 表单校验规则
      rules: {
        realname: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        telephone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    console.log(this.$route.query, 'this.$route')
    this.id = this.$route.query.id

    this.getInfo({ id: this.id })
  },
  mounted() {},
  methods: {
    // 点击修改个人信息 确定按钮
    toSubmitDetail() {
      // 1,校验表单
      this.$refs.myForm.validate(async(valid) => {
        if (valid) {
          // 发送保存或者更新请求
          // 去api封装保存或更新的异步请求
          this.formDetail1.birth = Number(this.formDetail1.birth)
          console.log(this.formDetail1)
          const res = await saveOrUpdate(this.formDetail1)
          this.$notify({
            type: 'success',
            message: res.message
          })
          // this.getProduct();
          this.getInfo({ id: this.id })

          this.toClose() // 重置表单验证  清空表单验证
        } else {
          return false
        }
      })
    },
    // 点击修改个人信息的方法
    async toEditDetail() {
      this.visible1 = true
      this.formDetail1 = this.formDetail
    },
    // 模态框关闭的方法
    toClose() {
      // 重置表单验证 清空表单验证
      this.visible = false
      setTimeout(() => {
        this.$refs.myForm.resetFields()
      }, 500)
      this.visible1 = false
      history.go()
    },
    // 点击修改头像 弹出模态框
    toEditImg() {
      this.title = '更改头像'
      this.visible = true
      // form.userFace 模态框
      this.form.userFace = this.userFace
    },
    // 修改头像确定按钮
    async toSubmit() {
      const res = await alterUserface({
        id: this.id,
        userface: this.form.userFace
      })
      console.log(res, '更改头像')
      this.$notify({
        type: 'success',
        message: res.message
      })
      this.visible = false
    },
    // 图片上传成功的方法
    handleAvatarSuccess(res, file) {
      this.userFace = URL.createObjectURL(file.raw)
      console.log(res, ' 图片上传成功的方法') // {msg,data 图片保存到服务器的地址}
      this.form.userFace = res.data
    },
    // 图片上传之前的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 获取详情信息
    async getInfo(id) {
      const res = await findUserDetailsById(id)
      console.log(res, '获取顾客详情信息')
      console.log(res.data.userFace, '头像地址')
      this.userFace = res.data.userFace
      this.formDetail = res.data
      // console.log(formDetail,'详情信息');
    }
  }
}
</script>
<style scoped>
.userFace {
  width: 130px;
  height: 130px;

  border-radius: 15%;
}
</style>
